<template>
 <view class="container">
    

<view v-for="location in locations" :key="location.spotname" class="location-item">
  <text>地点名: {{ location.spotname }}</text>
  <text>纬度: {{ location.latitude }}</text>
  <text>经度: {{ location.longitude }}</text>
  <text>描述: {{ location.description }}</text>
  <button @click="editLocation(location)">编辑</button>
  <button @click="deleteLocation(location.spotname)">删除</button>
</view>

   

    <!-- 添加地点 -->
    <view class="add-section">
      <input type="text" v-model="newLocation.spotname" placeholder="地点名" />
      <input type="text" v-model="newLocation.latitude" placeholder="纬度" />
      <input type="text" v-model="newLocation.longitude" placeholder="经度" />
      <input type="text" v-model="newLocation.description" placeholder="描述" />
      <button @click="addLocation">添加地点</button>
    </view>

    <!-- 编辑地点模态框 -->
    <view v-if="showEditModal" class="edit-modal">
      <modal show-cancel-button="true" @confirm="updateLocation" @cancel="hideEditModal" title="编辑地点">
        <view>
          <input type="text" v-model="editingLocation.spotname" placeholder="地点名" />
          <input type="text" v-model="editingLocation.latitude" placeholder="纬度" />
          <input type="text" v-model="editingLocation.longitude" placeholder="经度" />
          <input type="text" v-model="editingLocation.description" placeholder="描述" />
        </view>
      </modal>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      locations: [],
      searchSpotname: '',
      newLocation: {
        spotname: '',
        latitude: '',
        longitude: '',
        description: ''
      },
      showEditModal: false, // 控制编辑模态框显示
      editingLocation: {}, // 存储当前正在编辑的地点信息
    };
  },
  methods: {
    getLocations() {
  	uni.request({
    	url: 'http://127.0.0.1:3000/api/loc/locations', // 确保 URL 正确
   	 	method: 'GET',
    	success: (res) => {
      	if (res.statusCode === 200 && Array.isArray(res.data)) {
        	this.locations = res.data; // 假设后端返回的数据是地点对象的数组
      	} else {
        	console.error('返回的数据不是一个数组或状态码不是200:', res.data);
        	uni.showToast({ title: '获取地点信息失败', icon: 'none' });
      	}
    	},
    	fail: (err) => {
      	console.error('获取地点信息失败:', err);
      	uni.showToast({ title: '获取地点信息失败', icon: 'none' });
    	}
  	});
},
    /*searchLocation() {
      uni.request({
        url: `http://127.0.0.1:3000/api/loc/find?spotname=${this.searchSpotname}`,
        method: 'GET',
        success: (res) => {
          if (Array.isArray(res.data) && res.data.length > 0) {
            this.locations = res.data;
          } else {
            uni.showToast({ title: '地点不存在', icon: 'none' });
          }
        },
        fail: (err) => {
          console.error('搜索地点失败:', err);
          uni.showToast({ title: '搜索失败', icon: 'none' });
        }
      });
    },*/
    addLocation() {
      uni.request({
        url: 'http://127.0.0.1:3000/api/loc/locations',
        method: 'POST',
        data: this.newLocation,
        success: (res) => {
          uni.showToast({ title: '地点添加成功', icon: 'success' });
          this.getLocations(); // 重新加载地点列表
          this.resetNewLocation(); // 重置新地点表单
        },
        fail: (err) => {
          console.error('添加地点失败:', err);
          uni.showToast({ title: '添加失败', icon: 'none' });
        }
      });
    },
    deleteLocation(spotname) {
      uni.request({
        url: `http://127.0.0.1:3000/api/loc/delete?spotname=${spotname}`,
        method: 'POST',
        success: (res) => {
          uni.showToast({ title: '地点删除成功', icon: 'success' });
          this.getLocations(); // 重新加载地点列表
        },
        fail: (err) => {
          console.error('删除地点失败:', err);
          uni.showToast({ title: '删除失败', icon: 'none' });
        }
      });
    },
    updateLocation() {
      uni.request({
        url: 'http://127.0.0.1:3000/api/loc/locations',
        method: 'PUT',
        data: this.editingLocation,
        success: (res) => {
          uni.showToast({ title: '地点更新成功', icon: 'success' });
          this.getLocations(); // 重新加载地点列表
          this.hideEditModal(); // 隐藏编辑模态框
        },
        fail: (err) => {
          console.error('更新地点失败:', err);
          uni.showToast({ title: '更新失败', icon: 'none' });
        }
      });
    },
    editLocation(location) {
      this.editingLocation = { ...location };
      this.showEditModal = true;
    },
    hideEditModal() {
      this.showEditModal = false;
      this.editingLocation = {}; // 清空当前正在编辑的地点信息
    },
    resetNewLocation() {
      this.newLocation = { spotname: '', latitude: '', longitude: '', description: '' };
    }
  },
  onShow() {
    this.getLocations();
  }
};
</script>

<style>
.container {
  padding: 20px;
}

.search-section, .add-section {
  margin-bottom: 20px;
}


/* 编辑模态框样式 */
.edit-modal {
  display: flex;
  justify-content: center;
  align-items: center;
}

.location-item {
  border-bottom: 1px solid #ccc; /* 为每个地点项添加底部边框以区分 */
  padding: 10px 0; /* 增加上下内边距 */
}

.location-item text {
  display: block; /* 使文本独占一行 */
  margin-bottom: 5px; /* 为每个文本元素添加底部外边距 */
  font-size: 14px; /* 设置字体大小 */
}

.location-item button {
  margin-top: 10px; /* 为按钮添加上边距 */
}
</style>
